<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>商品库存</h2>
    <!-- {{}}表示vue的模板语法，可以直接将data里面的数据显示在这里 -->
    <p>{{ msg }}</p>
    <ul>
      <!-- v-for表示的vue的指令，用于做循环渲染 -->
      <li v-for="item in list">
        {{ item.product_name }}的库存还有{{ item.count }}件
        <!-- v-model也是vue的指令，用于做变量和input框的内容的双向绑定 -->
        <input type="number" v-model="item.count" />
      </li>
    </ul>
    <p>商品总库存: {{ total }}</p>
  </div>

  <script src="../Vue.js"></script>
  <script>
    const { createApp } = Vue;

    // 调用createApp方法，可以返回一个app实例
    // createApp传入的就是选项对象
    const app = createApp({
      // data选项表示的就是页面的数据
      // options
      data() {
        return {
          msg: "hello",
          list: [
            {
              product_name: "🍎",
              count: 5
            },
            {
              product_name: "🍌",
              count: 3
            },
            {
              product_name: "🍉",
              count: 8
            },
          ]
        }
      },
      computed: {
        total() {
          return this.list.reduce((sum, item) => {
            return sum += item.count
          }, 0)
        }
      }
    })

    // 将app实例挂载到id叫app的元素上面
    // 所以使用vue的时候，最外层只能是一个元素
    app.mount('#app')
  </script>
</body>
</html>